
import './manage.css';
import { useState, useEffect } from "react"
import axios from 'axios';
import * as echarts from 'echarts';

function App() {
  let [user, setuser] = useState(null)
  let [order, setorder] = useState(null)
  let [controller, setcontroller] = useState(null)
  let [userAll, setuserAll] = useState(null)
  let [orderAll, setorderAll] = useState(null)
  let [controllerAll, setcontrollerAll] = useState(null)

  let [echartsuser, setechartsuser] = useState([])
  let [echartsorder, setechartsorder] = useState([])
  let [echartscontroller, setechartscontroller] = useState([])
  var date = new Date();
  var year = date.getFullYear()
  var month = (date.getMonth() + 1).toString().padStart(2, '0')
  var days = date.getDate().toString().padStart(2, '0')
  var nowdate = year + '-' + month + '-' + days

  useEffect(() => {
    //  用户
    axios(`https://elm.cangdu.org/statis/user/${nowdate}/count`).then(res => {
      if (res.data.status === 1) {
        setuser(res.data.count)
      }
    })
    //订单
    axios(`https://elm.cangdu.org/statis/order/${nowdate}/count`).then(res => {
      if (res.data.status === 1) {
        setorder(res.data.count)
      }
    })
    //管理员
    axios(`https://elm.cangdu.org/statis/admin/${nowdate}/count`).then(res => {
      if (res.data.status === 1) {
        setcontroller(res.data.count)
      }
    })
    //  用户All
    axios(`https://elm.cangdu.org/v1/users/count`).then(res => {
      if (res.data.status === 1) {
        setuserAll(res.data.count)
      }
    })
    //订单 All
    axios(`https://elm.cangdu.org/bos/orders/count`).then(res => {
      if (res.data.status === 1) {
        setorderAll(res.data.count)
      }
    })
    //管理员All
    axios(`https://elm.cangdu.org/admin/count`).then(res => {
      if (res.data.status === 1) {
        setcontrollerAll(res.data.count)
      }
    })

    //echarts 用户
    let userArr = []
    for (var i = 0; i < 7; i++) {
      let time = (date.getDate() - i).toString().padStart(2, '0')
      if (time == '00') {
        time = 30
        month = date.getMonth().toString().padStart(2, '0')
      }
      if (time == '-1') {
        time = 29
        month = date.getMonth().toString().padStart(2, '0')
      }

      axios(`https://elm.cangdu.org/statis/user/${year + '-' + month + '-' + time}/count`).then(res => {
        if (res.data.status === 1) {
          userArr.push(res.data.count)
          setechartsuser(userArr)
        }
      })
    }
    //echarts 订单
    let orderArr = []
    for (var i = 0; i < 7; i++) {
      let time = (date.getDate() - i).toString().padStart(2, '0')
      if (time == '00') {
        time = 30
        month = date.getMonth().toString().padStart(2, '0')
      }
      if (time == '-1') {
        time = 29
        month = date.getMonth().toString().padStart(2, '0')
      }

      axios(`https://elm.cangdu.org/statis/order/${year + '-' + month + '-' + time}/count`).then(res => {
        if (res.data.status === 1) {
          orderArr.push(res.data.count)
          setechartsorder(orderArr)
        }
      })
    }
    //echarts 管理员
    let controllerArr = []
    for (var i = 0; i < 7; i++) {
      let time = (date.getDate() - i).toString().padStart(2, '0')
      if (time == '00') {
        time = 30
        month = date.getMonth().toString().padStart(2, '0')
      }
      if (time == '-1') {
        time = 29
        month = date.getMonth().toString().padStart(2, '0')
      }

      axios(`https://elm.cangdu.org/statis/admin/${year + '-' + month + '-' + time}/count`).then(res => {
        if (res.data.status === 1) {
          controllerArr.push(res.data.count)
          setechartscontroller(controllerArr)
        }
      })
    }

    initChart()
  }, [])

  const initChart = () => {
    let element = document.getElementById('chart1');
    let myChart = echarts.init(element);
    myChart.clear()
    let option;
    option = {
      title: {
        text: '走势图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['新注册用户', '新增订单', '新增管理员',]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', `${nowdate}`]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '新注册用户',
          type: 'line',
          stack: 'Total',
        data: echartsuser

        },
        {
          name: '新增订单',
          type: 'line',
          stack: 'Total',
          data: echartsorder
        },
        {
          name: '新增管理员',
          type: 'line',
          stack: 'Total',
          data: [12,6,9,5,30,40,5]
        },

      ]
    };

    option && myChart.setOption(option);
  }



  return <div className='managebody'>
    <section className='data_section'>
      <header className='section_title'>数据统计</header>
      <div className='el-row'>
        <div className='el-col'>
          <div className='data_list today_head'>
            <span className='data_num head'>
              当日数据 :
            </span>
          </div>
        </div>
        <div className='el-col'>
          <div className='data_list '>
            <span className='data_num '>
              {user}
            </span>新增用户
          </div>
        </div>
        <div className='el-col'>
          <div className='data_list'>
            <span className='data_num'>
              {order}
            </span>新增订单
          </div>
        </div>
        <div className='el-col'>
          <div className='data_list'>
            <span className='data_num'>
              {controller}
            </span> 新增管理员
          </div>
        </div>
      </div>
      <div className='el-row'>
        <div className='el-col'>
          <div className='data_list all_head'>
            <span className='data_num head'>
              总数据 :
            </span>
          </div>
        </div>
        <div className='el-col'>
          <div className='data_list '>
            <span className='data_num '>
              {userAll}
            </span>注册用户
          </div>
        </div>
        <div className='el-col'>
          <div className='data_list'>
            <span className='data_num'>
              {orderAll}
            </span>订单
          </div>
        </div>
        <div className='el-col'>
          <div className='data_list'>
            <span className='data_num'>
              {controllerAll}
            </span> 管理员
          </div>
        </div>
      </div>

    </section>
    <div id='chart1' ></div>
  </div>

}

export default App;
